

<template>
<div>
     <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
     <Modal v-model="mode" width="50%"  title="新增订单" @change="testChange"  @on-cancel="cancel">
         <Row>
          <Form ref="EntryOrderAdd"  :model="EntryOrderAdd"  :rules="ruleInUser" :label-width="100">
                <div style="width:100%;height:auto;margin:0 auto;">
                  <Row>
                     <i-col span="8">
                       <FormItem label="客户名称：" prop="CustomerName">
                        <label slot="label">客户名称：</label>
                        <Select v-model="EntryOrderAdd.CustomerName" @on-change="companyChange" placeholder="请选择装箱类型">
                          <Option v-for="item in CompanyList" :value="item.Id" :key="item.Id">{{ item.CompanyName }}</Option>
                        </Select>
                       </FormItem> 
                     </i-col>
                     <i-col span="8">
                       <FormItem label="联系电话：" prop="CompanyTelephone">
                          <Input v-model="EntryOrderAdd.CompanyTelephone" class="orders_disabled" placeholder="请输入联系电话"/>
                        </FormItem> 
                     </i-col>
                
                    <i-col span="8"> 
                      <FormItem label="申请时间：" prop="ApplyTime">
                        <DatePicker v-model="EntryOrderAdd.ApplyTime" @on-change="applyTimeChange"  :clearable=true :editable=false type="date" placement="bottom-end" placeholder="选择日期"></DatePicker>
                      </FormItem> 
                    </i-col>
                       </Row>
                       <Row>
                       <i-col span="6">
                      <FormItem label="质押品种1：" prop="CheckTypeFstId">
                        <Select v-model="EntryOrderAdd.CheckTypeFstId" placeholder="请选择红枣品级">
                          <Option v-for="item in TypeList" :value="item.Id" :key="item.Id">{{ item.TypeName }}</Option>
                        </Select>
                      </FormItem>  
                       </i-col>
                       <i-col span="6">
                        <FormItem label="质押件数：" prop="CheckFstCount">
                          <InputNumber v-model="EntryOrderAdd.CheckFstCount"/>
                        </FormItem> 
                       </i-col>
                         <i-col span="6">
                        <FormItem label="每件重量：" prop="UnitWeight">
                          <InputNumber v-model="EntryOrderAdd.UnitWeight" class="orders_disabled" disabled/>
                        </FormItem> 
                         </i-col>
                          <i-col span="6">
                        <FormItem label="装箱类型：" prop="CheckPackId">
                        <Select v-model="EntryOrderAdd.CheckPackId" @on-change="packChange" placeholder="请选择装箱类型">
                          <Option v-for="item in PackList" :value="item.Id" :key="item.Id">{{ item.PackName }}</Option>
                        </Select>
                      </FormItem> 
                       </i-col>
                       </Row>
                       <Row>
                       <i-col span="6">
                       <FormItem label="质押品种2：" prop="CheckTypeSecId">
                        <Select v-model="EntryOrderAdd.CheckTypeSecId" placeholder="请选择红枣品级">
                          <Option v-for="item in TypeList" :value="item.Id" :key="item.Id">{{ item.TypeName }}</Option>
                        </Select>
                      </FormItem>  
                       </i-col>
                         <i-col span="6">
                       <FormItem label="质押件数：" prop="CheckSecCount">
                          <InputNumber v-model="EntryOrderAdd.CheckSecCount"/>
                        </FormItem>
                         </i-col>
                           <i-col span="6"> 
                         <FormItem label="每件重量：" prop="UnitWeight">
                          <InputNumber v-model="EntryOrderAdd.UnitWeight" class="orders_disabled" disabled/>
                        </FormItem>   

                           </i-col>
                       <i-col span="6">
                      <FormItem label="装箱类型：" prop="CheckPackId">
                        <Select v-model="EntryOrderAdd.CheckPackId" @on-change="packChange" placeholder="请选择装箱类型">
                          <Option v-for="item in PackList" :value="item.Id" :key="item.Id">{{ item.PackName }}</Option>
                        </Select>
                      </FormItem>                    
                    </i-col>
                       </Row>
                       <Row>
                    <i-col span="6">
                         <FormItem label="质押品种3：" prop="CheckTypeThdId"> 
                        <Select v-model="EntryOrderAdd.CheckTypeThdId" placeholder="请选择红枣品级">
                          <Option v-for="item in TypeList" :value="item.Id" :key="item.Id">{{ item.TypeName }}</Option>
                        </Select>
                      </FormItem> 
                    </i-col>
                    
                    <i-col span="6">
                        <FormItem label="质押件数：" prop="CheckThdCount">
                          <InputNumber v-model="EntryOrderAdd.CheckThdCount"/>
                        </FormItem> 
                    </i-col>
                    
                    <i-col span="6">
                        <FormItem label="每件重量：" prop="UnitWeight">
                          <InputNumber v-model="EntryOrderAdd.UnitWeight" class="orders_disabled"disabled/>
                        </FormItem>      
                    </i-col>
                      <i-col span="6">
                      <FormItem label="装箱类型：" prop="CheckPackId">
                        <Select v-model="EntryOrderAdd.CheckPackId" @on-change="packChange" placeholder="请选择装箱类型">
                          <Option v-for="item in PackList" :value="item.Id" :key="item.Id">{{ item.PackName }}</Option>
                        </Select>
                      </FormItem>                    
                    </i-col>
                       </Row>
                    <!-- <i-col span="24">
                        <FormItem>
                            <Button type="primary" :loading="loading" class="buttn_approve"  @click="handleSubmit('EntryOrderAdd')">提交</Button>
                             
                            <Button type="warning" :loading="loading" class="buttn_reject" @click="handleSubmit('EntryOrderAdd',-1)">驳回</Button>
                            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                         </FormItem>
                  </i-col> -->
                   
                </div>
              </Form>
         </Row>


        <div slot="footer" >
             <Button type="primary" :loading="loading" class="buttn_approve"  @click="handleSubmit('EntryOrderAdd')">提交</Button>
               <Button :loading="loading" @click="cancel('EntryOrderAdd')">取消</Button>
            <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
        </div>
    
    </Modal>
</div>
</template>

<script>
import {getCompanyList,getTypeList,getPackList,createEntryOrderData,timestampToDate,formatLateDate} from "@/api/data";
import { formatDate } from '../../components/date.js';
export default {
    name: 'Add',
    data () {
        return {
          loading:false,
          mode:this.add,
          
           //表单验证规则
          ruleInUser: {
           
            CustomerName: [
              { required: true, type:"number", message: '请选择客户', trigger: 'change' }
            ],

            //  CheckTypeFstId: [
            //   { required: true, type:"number",min:1, message: '请选择品种', trigger: 'change' }
            // ],


            CheckFstCount: [
              { required: true, type:"number",min:1.0, message: '请输入质押件数', trigger: 'blur' }
            ],

            CheckPackId: [
              { required: true, type:"number",min:1, message: '请选择装箱类型', trigger: 'change' }
            ],
            
            CompanyTelephone: [
              { required: true, message: '请填写电话号码', trigger: 'blur' }
            ],

            ApplyTime: [
              { required: true, type:'date', message: '请选择申请时间', trigger: 'blur' }
            ],

          },

        EntryOrderAdd:{
             CheckTypeFstId:1,
             CheckFstCount:0,
             CheckTypeSecId:0,
             CheckSecCount:0,
             CheckTypeThdId:0,
             CheckThdCount:0,
             CheckPackId:1
        },

           CompanyList:[
            {
              Id:1,
              CompanyName:'阿拉尔市十一团蜜园果品农民专业合作社',
              CompanyTelephone:'15809116437'
            },
            {
              Id:2,
              CompanyName:'新疆奎木星',
              CompanyTelephone:'13772086610'
            }
          ],

          TypeList:[
            {
              Id:1,
              TypeName:'灰枣特级'
            },
            {
              Id:2,
              TypeName:'灰枣一级'
            }
          ],

           PackList:[
            {
              Id:1,
              PackName:'箱装',
              UnitWeight:3.5
            },
            {
              Id:2,
              PackName:'框装',
              UnitWeight:4.5
            }
          ],
           
          listdata:[]

        };
    },
    props:{
        add:{
            type:Boolean ,
            required:true
        },
        // EntryOrderAdd:{
        //     type:Object,
        //     required:true 
        // },
        

    },
    methods: {
      //装箱类型选项改变，对应的单箱子重量改变
      packChange(){
          this.EntryOrderAdd.UnitWeight = this.PackList[Number(this.EntryOrderAdd.CheckPackId)-1].UnitWeight
      },
      //公司选项改变，对应的电话号码改变
      companyChange(){
        this.EntryOrderAdd.CompanyTelephone = this.CompanyList[Number(this.EntryOrderAdd.CustomerName)-1].CompanyTelephone
      },

      //时间值改变，控制时间在预设的3天范围内
      applyTimeChange(){
        var startTime = timestampToDate(new Date(),'yyyy-MM-dd')
        var selectTime = timestampToDate(this.EntryOrderAdd.ApplyTime,'yyyy-MM-dd')
        var endTime = formatLateDate(new Date(),3)
        if(selectTime > endTime){
          this.EntryOrderAdd.ApplyTime = endTime
        }else if(selectTime < startTime){
          this.EntryOrderAdd.ApplyTime = startTime
        }
      },
      testChange(val){
        this.$emit('testChange',val);
       },
      cancel(){
          this.loading = false; 
          let data = {
            mode:false
          }
          this.$emit('cancelCallBack', data);
       },
      //提交编辑后的userInfo
      handleSubmit(name) {
        
        this.$refs[name].validate(valid => { 
          console.log("提交验证：",valid)    
          if (valid) { 
            this.loading = true;       
            this.submit();
          } else {
            this.$Message.error("请填写相关信息!");
          }
        });
      },
    submit(){
      var applyTime = timestampToDate(this.EntryOrderAdd.ApplyTime,'yyyy-MM-dd')
  
      var checkTypeFst = ""
      var checkTypeSec = ""
      var checkTypeThd = ""
      if(this.EntryOrderAdd.CheckTypeFstId != 0){
            var checkTypeFst = this.TypeList[Number(this.EntryOrderAdd.CheckTypeFstId-1)].TypeName
      }
      if(this.EntryOrderAdd.CheckTypeSecId != 0){
            var checkTypeSec = this.TypeList[Number(this.EntryOrderAdd.CheckTypeSecId-1)].TypeName
      }
      if(this.EntryOrderAdd.CheckTypeThdId != 0){
            var checkTypeThd = this.TypeList[Number(this.EntryOrderAdd.CheckTypeThdId-1)].TypeName
      }
      const data = {
            CompanyId: this.EntryOrderAdd.CustomerName,
            ApplyTime: applyTime,
            CheckTypeFstId: this.EntryOrderAdd.CheckTypeFstId,
            CheckTypeFst: checkTypeFst,
            CheckFstCount: this.EntryOrderAdd.CheckFstCount,
            CheckTypeSecId: this.EntryOrderAdd.CheckTypeSecId,
            CheckTypeSec: checkTypeSec,
            CheckSecCount: this.EntryOrderAdd.CheckSecCount,
            CheckTypeThdId: this.EntryOrderAdd.CheckTypeThdId,
            CheckTypeThd: checkTypeThd,
            CheckThdCount: this.EntryOrderAdd.CheckThdCount,
            CheckPackId: this.EntryOrderAdd.CheckPackId,
            CheckPack: this.PackList[Number(this.EntryOrderAdd.CheckPackId-1)].PackName,
            UnitWeight:this.EntryOrderAdd.UnitWeight,
           
      };
      
      
      createEntryOrderData(data).then(res =>{
            if(res !== null){
              this.$Message.success("提交成功");
              this.loading = false; 
              let data = {
                mode:false
              }
              this.$emit('success', data);   
            }else if(response.data.flag == 0){
            this.$Message.success("提交失败"); 
            }else if(response.data.flag == 2){
            this.$Message.success("状态过期");
            }
        }).catch(error => {
            this.$Message.error("请核对之后重新提交");
             this.loading = false; 
       });


     },
    },
    mounted () {
        const cmpdata = {
        fields:"Id,CompanyName,CompanyTelephone",
        offset:"0",
        limit:"-1"
      };
      const typedata = {
        fields:"Id,TypeName",
        offset:"0",
        limit:"-1"
      };
      const packdata = {
        fields:"Id,PackName,UnitWeight",
        offset:"0",
        limit:"-1"
      };
      //获得包含公司Id和companyname字段的全部列表
      getCompanyList(cmpdata).then(res =>{
        this.CompanyList = res.List;
        
      });
      
      //获得品级包含Id\TypeName字段的全部列表
      getTypeList(typedata).then(res =>{
        this.TypeList = res.List;
      });

      //获得包装类型包含Id\PackName\UnitWeight字段的全部列表
      getPackList(packdata).then(res =>{
        this.PackList = res.List;
      });

      //默认加载三天后时间
      this.EntryOrderAdd.ApplyTime = formatLateDate(new Date(),3)
    },
    watch: {
        add(val) {
        this.mode = val
    }
}
}
</script>
<style>
.dept .ivu-select-placeholder{
color:#515a6e!important;
}
</style>